<template>
  <div class="home">
    <!-- 头部 -->
    <my-header>
        <!-- //v-slot:center -->
        <template #center> 
            优惠券
        </template>
        <template #right>
           <span @click="show = true"> 筛选</span>
        </template>
    </my-header>
    <!-- nav -->
    <ul class="tab">
        <li @click="change(0)" :class="{active:$store.state.status == 0}">全部 {{$store.state.list.length}}</li>
        <li @click="change(1)" :class="{active:$store.state.status == 1}">未使用 {{$store.getters.getNum.num1}}</li>
        <li @click="change(2)" :class="{active:$store.state.status == 2}">已使用 {{$store.getters.getNum.num2}}</li>
    </ul>
    <!-- 列表 -->
    <!-- v-for 和v-show一起使用做筛选 -->
    <my-list v-for="item,index in list" :key="index" :item="item" v-show="$store.state.status ==0?true:item.status == $store.state.status"></my-list>

    <!-- 弹出框 -->
    <van-popup v-model:show="show" position="right" :style="{ height: '100%',width:'50%' }">
        <div class="con">
            <ul>

                <li v-for="(item,index) in tags" :key="index" :class="{on:item.num == num}" @click="changeNum(item.num)">{{item.name}}</li>
            </ul>
            <van-button type="primary" @click="filterData">确定</van-button>
            <van-button type="info">取消</van-button>
        </div>
    </van-popup>


  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from '@/components/myHeader.vue'
import myList from '@/components/myList.vue'
import {useStore} from 'vuex'
import axios from 'axios'
import {reactive,toRefs,computed} from 'vue'
export default {
//   name: 'HomeView',
setup(props) {
    const {state,commit} = useStore()
    const data = reactive({
        list:computed(()=>state.list),
        show:false,//弹出框的状态
        tags:[{name:'三天内',num:3},{name:'五天内',num:5},{name:'七天内',num:7}],//自己声明的
        num:'',//用来保存你点击的num
    })
    const change = (index)=>{
        commit('change',index)

    }
    // 请求数据
   axios.get('data.json').then(res=>{
       console.log(res);
       commit('setList',res.data.cuponData)

   })
//    切换  边框
   const changeNum=(val)=>{
    // 判断num有没有值  如果有值就置空，没有没有值就赋值
    if(data.num == ''){
        data.num = val
    }else{
        data.num = ''
    }
    

   }
//    筛选
const filterData = ()=>{
    commit('filterData',data.num)

}
    return {change,...toRefs(data),changeNum,filterData}
    
},
  components: {
    myHeader,
    myList
  }
}
</script>
<style lang="scss" scoped>
.tab{
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: space-around;
    background: yellowgreen;
    color:#fff;
    .active{
      
        color:#c00;
    }


}
.con{
    ul{
        li{
            width:50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border:1px solid #ccc;
            margin: 20px 10px;

        }
        .on{
              border:1px solid blue;
        }
    }

}
</style>

